<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!--vue前端js框架-->
	<link rel="stylesheet" href="css/index.css"> <!-- 放哪无所谓 -->
	<script src="js/vue.js"></script>
	<!-- axios用来/向后端发送请求-->
	<script src="js/axios.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/common.js"></script>
</head>

<body>
	<div id="app">

		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="姓名">
				<el-input v-model="find" placeholder="姓名"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="init">查询</el-button>
			</el-form-item>
		</el-form>

		<el-button type="success" round @click="xz">新增用户</el-button>
		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuid" border
			:default-expand-all="isopen" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column prop="userid" label="ID" sortable width="180"></el-table-column>
			<el-table-column prop="username" label="姓名" sortable width="180"></el-table-column>
			<el-table-column prop="" label="密码" sortable width="180">
				<template slot-scope="scope">
					******
				</template>
			</el-table-column>
			<el-table-column prop="state" label="状态" sortable width="180"></el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="warning" @click="userrole(scope.$index, scope.row)">分配角色</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-drawer title="用户角色分配" :visible.sync="drawer">
			当前角色:
			</br>
			<template v-for="item in userRoles">
				&nbsp;&nbsp;
				<el-button size="mini" closable type='primary' style="margin-left: 20px;margin-top: 10px;"
					@click="deleteUserRole(item.roleid)">{{item.description}}&nbsp;&nbsp;<i
						class="el-icon-minus"></i></el-button>
			</template>
			<hr />
			所有角色:
			</br>
			<template v-for="item in roleList">
				&nbsp;&nbsp;

				<el-button size="mini" closable type='success' style="margin-left: 20px;margin-top: 10px;"
					@click="xinuserrole(item)">{{item.description}}&nbsp;&nbsp;<i class="el-icon-plus"></i></el-button>
			</template>
			<hr />

		</el-drawer>

		<el-pagination background layout="prev, pager, next" :total="total" :page-size="limit"
			@current-change="handleCurrentChange">
		</el-pagination>

		<el-dialog :title="title" :visible.sync="dialogFormVisible">

			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="姓名" :label-width="formLabelWidth" prop="username">
					<el-input v-model="form.username" autocomplete="off"></el-input>
				</el-form-item>


				<el-form-item label="密码" :label-width="formLabelWidth" prop="userpass">
					<el-input v-model="form.userpass" autocomplete="off"></el-input>
				</el-form-item>


				<el-form-item label="状态" :label-width="formLabelWidth">
					<label><input type="radio" name="mes" value='0' v-model="form.state" />用户</label>
					<label><input type="radio" name="mes" value='1' v-model="form.state" />管理员</label>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add('form')">新增</el-button>
			</div>
		</el-dialog>

		<el-dialog title="修改人员信息" :visible.sync="dialogForm">
			<el-form :model="user" :rules="rules" ref="user" label-width="100px" class="demo-ruleForm">
				<el-input v-model="user.userid" :label-width="formLabelWidth" type="hidden"></el-input>
				<el-input v-model="user.userpass" type="hidden"></el-input>

				<el-form-item label="姓名" :label-width="formLabelWidth" prop="rolename">
					<el-input v-model="user.username"></el-input>
				</el-form-item>

				<el-form-item label="请输入旧密码" :label-width="formLabelWidth" prop="description">
					<el-input v-model="userpassOld" type="password">
					</el-input>
				</el-form-item>
				<el-form-item label="请输入新密码" :label-width="formLabelWidth" prop="description">
					<el-input v-model="userpassNew" type="password">
					</el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth">
					<label><input type="radio" name="mes" value='0' v-model="user.state" />用户</label>
					<label><input type="radio" name="mes" value='1' v-model="user.state" />管理员</label>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogForm = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('user')">修 改</el-button>
			</div>
		</el-dialog>
	</div>
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {//数据存储的地方
			tableData: [],
			find: '',
			isopen: false,
			total: 0,
			limit: 8,
			page: 1, //默认当前第几页
			userpassOld: '',
			userpassNew: '',
			drawer: false,
			nowuserid: 0,
			newArr: [],
			form: {
				userid: '',
				username: '',
				userpass: '',
				state: 0
			},
			userRoles: [],//当前用户拥有的角色集合
			roleList: [],
			user: {
				userid: '',
				username: '',
				userpass: '',
				state: 0
			},
			formLabelWidth: '120px',
			title: "新增菜单",
			dialogFormVisible: false,
			dialogForm: false,
			rules: {
				username: [
					{ required: true, message: '请输入人物名称', trigger: 'blur' },

				], userpass: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				]
			},

		},
		methods: {//方法
			deleteUserRole(roleid) {
				//没有查询id所以根据userid和roleid删除
				//alert(this.nowuserid+"======="+roleid)

				axios.post(HTTPPATH + "delebuuserroleid", { "userid": this.nowuserid, "roleid": roleid }).then((result) => {
					console.log(result.data)
					if (result.data.code = 200) {
						this.userRoles = this.userRoles.filter(function (obj) {
							return obj.roleid !== roleid
						})
					}
					this.$message({
						message: "删除成功",
						type: 'warning'
					})
				})
			},
			xinuserrole(item) {
				//alert(item.roleid)
				console.log(this.newArr)
				let that = this

				if (that.newArr.indexOf(item.roleid) != -1) {
					that.$message({
						message: "已拥有该角色",
						type: 'success'
					})
				} else {
					axios.post(HTTPPATH + "xinuserrole", { "userid": this.nowuserid, "roleid": item.roleid }).then((result) => {
						console.log(result.data)
						if (result.data == "新增成功") {
							this.userRoles.push(item)
							that.newArr.push(item.roleid)
						}
						that.$message({
						message: "新增成功",
						type: 'warning'
					})
					})
				}

			},
			userrole(index, row) {
				this.drawer = true
				this.nowuserid = row.userid
				axios.get(HTTPPATH + "selerolebyid/" + this.nowuserid).then((result) => {
					this.userRoles = result.data.data.roleinfos
					for (let i = 0; i < result.data.data.roleinfos.length; i++) {
						this.newArr.push(result.data.data.roleinfos[i].roleid)
					}
				})

			},
			allRole() {
				let that = this
				axios.get(HTTPPATH + "rolelist").then((result) => {
					console.log(result.data.data.role);
					that.roleList = result.data.data.role
				})
			},
			xz() {
				this.dialogFormVisible = true
			},
			submitForm(formName) {
				if (this.user.userpass == this.userpassOld) {
					this.$refs[formName].validate((valid) => {
						let that = this
						if (valid) {
							alert(that.user.userid);
							axios.get(HTTPPATH + "upduser", { params: { userid: that.user.userid, username: that.user.username, userpass: that.userpassNew, state: that.user.state } }).then(res => {
								if (res.data == "修改成功") {
									that.$message({
										message: "修改成功",
										type: 'success'
									})
								} else {
									that.$message.error("修改失败")
								}
								that.dialogForm = false
								that.init()

							})
						}
					})
				} else if (this.userpassOld == null || this.userpassOld == '') {
					this.$refs[formName].validate((valid) => {
						let that = this
						if (valid) {
							alert(that.user.userid);
							axios.get(HTTPPATH + "upduser", { params: { userid: that.user.userid, username: that.user.username, userpass: that.userpass, state: that.user.state } }).then(res => {
								if (res.data == "修改成功") {
									that.$message({
										message: "修改成功",
										type: 'success'
									})
								} else {
									that.$message.error("修改失败")
								}
								that.dialogForm = false
								that.init()

							})
						}
					})
				} else {
					alert("旧密码不一致")
				}
			},
			add(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.get(HTTPPATH + "countname", { params: { username: this.form.username } }).then((result) => {
							if (result.data == 0) {
								let that = this
								axios.post(HTTPPATH + "userins", this.form).then(function (res) {
									if (res.data == "新增成功") {
										that.$message({
											message: "新增成功",
											type: 'success'
										})
									} else {
										that.$message.error("新增失败")
									}
									that.dialogForm = false
									that.init()
								})

							} else {
								alert("用户名已存在")
							}
						})
					}
				})

			},
			handleCurrentChange(val) {
				this.page = val
				this.init();
				console.log(`当前页: ${val}`);
			},

			handleEdit(index, row) {
				this.dialogForm = true
				axios.get(HTTPPATH + "userinfo?userid=" + row.userid).then((res) => {
					console.log(res)
					this.user = res.data

				});

			},
			handleDelete(index, row) {
				//alert(row.userid)
				if (confirm("是否删除")) {

					axios.get(HTTPPATH + "deluser", { params: { userid: row.userid } }).then((result) => {
						if (result.data == "删除成功") {
							this.$message({
								message: "删除成功",
								type: 'success'
							})
						} else {
							that.$message.error("删除失败")
						}

						this.init()
					})
				}
			},
			init() {
				let that = this
				axios.get(HTTPPATH + "userlist?username=" + this.find + "&page=" + this.page + "&limit=" + this.limit).then((result) => {
					console.log(result.data.records);
					//let s = arrayToTree(result.data.data.menu)
					//console.log(s)
					that.tableData = result.data.records
					that.total = result.data.total
					that.limit = result.data.size
				})

			}
		}, created() {//创建后
			this.init()
			this.allRole()
		}

	})
</script>

</html>